<template>
  <!--  <el-card shadow="never" class="aui-card&#45;&#45;fill">-->
  <div class="mod-monitor__server">
    <el-row :gutter="20">
      <el-col :span="12" v-loading="loading">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>{{$t('monitor.cpuTitle')}}</span>
          </div>

          <el-row>
            <el-col :span="16">
              <div class="text item">
                <el-row>
                  <el-col :span="12">
                    <span>{{$t('monitor.cpuCoreNumber')}}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ dataForm.cpu.cpuNum}}</span>
                  </el-col>
                </el-row>
              </div>
              <div class="text item">
                <el-row>
                  <el-col :span="12">
                    <span>{{$t('monitor.cpuUserUtilization')}}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ dataForm.cpu.used}}%</span>
                  </el-col>
                </el-row>
              </div>
              <div class="text item">
                <el-row>
                  <el-col :span="12">
                    <span>{{$t('monitor.cpuSysUtilization')}}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ dataForm.cpu.sys}}%</span>
                  </el-col>
                </el-row>
              </div>
              <div class="text item">
                <el-row>
                  <el-col :span="12">
                    <span>{{$t('monitor.cpuFreeUtilization')}}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ dataForm.cpu.free}}%</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <el-progress type="circle" :percentage="cpuFree"></el-progress>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12" v-loading="loading">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>{{$t('monitor.memoryTitle')}}</span>
          </div>

          <el-row>
            <el-col :span="16">
              <div class="text item">
                <el-row>
                  <el-col :span="12">
                    <span>{{$t('monitor.memoryTotal')}}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ dataForm.mem.total}}G</span>
                  </el-col>
                </el-row>
              </div>
              <div class="text item">
                <el-row>
                  <el-col :span="12">
                    <span>{{$t('monitor.memoryUsed')}}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ dataForm.mem.used}}G</span>
                  </el-col>
                </el-row>
              </div>
              <div class="text item">
                <el-row>
                  <el-col :span="12">
                    <span>{{$t('monitor.memoryFree')}}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ dataForm.mem.free}}G</span>
                  </el-col>
                </el-row>
              </div>
              <div class="text item">
                <el-row>
                  <el-col :span="12">
                    <span>{{$t('monitor.memoryOccupy')}}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ dataForm.mem.occupy}}%</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <el-progress type="circle" :percentage="dataForm.mem.occupy"></el-progress>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" v-loading="loading">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>{{$t('monitor.sysTitle')}}</span>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="6">
                <span>{{$t('monitor.sysComputerName')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.sys.computerName}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{$t('monitor.sysComputerIp')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.sys.computerIp}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span>{{$t('monitor.sysOsName')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.sys.osName}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{$t('monitor.sysOsArch')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.sys.osArch}}</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" v-loading="loading">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>{{$t('monitor.jvmTitle')}}</span>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="6">
                <span>{{$t('monitor.jvmName')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.jvm.name}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{$t('monitor.jvmVersion')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.jvm.version}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span>{{$t('monitor.jvmStartTime')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.jvm.startTime}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{$t('monitor.jvmRunTime')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.jvm.runTime}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span>{{$t('monitor.jvmHome')}}</span>
              </el-col>
              <el-col :span="6">
                <div style="width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis"
                  :title="dataForm.jvm.home">{{ dataForm.jvm.home}}</div>
              </el-col>
              <el-col :span="6">
                <span>{{$t('monitor.sysHome')}}</span>
              </el-col>
              <el-col :span="6">
                <div style="width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis"
                  :title="dataForm.jvm.userDir">{{ dataForm.sys.userDir}}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span>{{$t('monitor.jvmUsage')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.jvm.usage}}%</span>
              </el-col>
              <el-col :span="6">
                <span>{{$t('monitor.jvmMemoryTotal')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.jvm.total}}M</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span>{{$t('monitor.jvmUsed')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.jvm.used}}M</span>
              </el-col>
              <el-col :span="6">
                <span>{{$t('monitor.jvmFree')}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{ dataForm.jvm.free}}M</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" v-loading="loading">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>{{$t('monitor.fileTitle')}}</span>
          </div>
          <el-table :data="dataForm.sysFiles" style="width: 100%;font-size: 13px; color: #8492a6;">
            <el-table-column prop="dirName" :label="$t('monitor.fileDirName')" header-align="center">
            </el-table-column>
            <el-table-column prop="sysTypeName" :label="$t('monitor.fileSysTypeName')" header-align="center">
            </el-table-column>
            <el-table-column prop="typeName" :label="$t('monitor.fileTypeName')" header-align="center">
            </el-table-column>
            <el-table-column prop="total" :label="$t('monitor.fileTotal')" header-align="center">
            </el-table-column>
            <el-table-column prop="free" :label="$t('monitor.fileFree')" header-align="center">
            </el-table-column>
            <el-table-column prop="used" :label="$t('monitor.fileUsed')" header-align="center">
            </el-table-column>
            <el-table-column prop="usage" :label="$t('monitor.fileUsage')" header-align="center">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!--  </el-card>-->
</template>

<script>
import Model from '../flowable/model'
export default {
  components: { Model },
  data () {
    return {
      loading: false,
      url: '/monitor/server',
      dataForm: {
        cpu: { cpuNum: 1, used: 0, sys: 0, free: 100 },
        mem: { total: 0, used: 0, free: 0, occupy: 0 },
        sys: { computerName: null, computerIp: null, osName: null, osArch: null, userDir: null },
        jvm: { name: null, version: null, startTime: null, runTime: null, home: null, usage: null, total: null, used: null, free: null }
      },
      timer: null
    }
  },
  activated () {
    this.init()
  },
  destroyed: function () {
    clearInterval(this.timer)
  },
  computed: {
    cpuFree: function () {
      return this.numFilter(100 - this.dataForm.cpu.free)
    }
  },
  methods: {
    init () {
      this.$nextTick(() => {
        Promise.all([
          this.setTimer(),
          this.getInfo(true)
        ]).then(() => {
        })
      })
    },
    setTimer: function () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        Promise.all([
          this.getInfo(false)
        ]).then(() => {
        })
      }, 5000)
    },
    getInfo (load) {
      if (load) {
        this.loading = true
      }
      this.$http.get(this.url).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return
        }
        this.dataForm = res.data
      }).catch(() => {
        this.loading = false
      })
    },
    numFilter (value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2)
      // num.toFixed(2)获取的是字符串
      return parseFloat(realVal)
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

  & :last-child {
    margin-bottom: 0;
  }
}

.text {
  font-size: 13px;
  color: #8492a6;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>
